<template>
  <div class="ele">
      <el-button fixed="left" type="primary" @click="show = true" icon="el-icon-edit" >增加</el-button>
      <template>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="CourseName"
              label="课程"
              width="180">
            </el-table-column>
            <el-table-column
              prop="description"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="type"
              label="描述">
            </el-table-column>
            <el-table-column 
              fixed="right"
              label="操作"
              width="120">
              <template slot-scope="scope">
                  <el-popconfirm
            size="mini"
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
        >
        <el-button slot="reference">删除</el-button>
      </el-popconfirm>
        </template>
        </el-table-column>
          </el-table>
          <el-dialog :visible.sync="show" title="添加" >
            <el-form :model="tableData">
              <el-form-item label="日期" height="30px">
                <el-input v-model="tableData.date" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="课程" >
                <el-input v-model="tableData.CourseName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="类型" >
                <el-input v-model="tableData.description" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="描述" >
                <el-input v-model="tableData.type" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="add()">确 定</el-button>
  </div>
</el-dialog>
  </template>
  </div>
</template>
<script>

export default ({
name:'ele',
data(){
    return{
        form:'',
        show:false,
        showSu:false,
            numberValidateForm: {
            data: ''
        },
        newData:{},
        tableData: [
            {
            date: '1',
            CourseName:'第一专业',
            description:'web',
            type:'程序元家园',
            }, 
            {
                date: '2',
                CourseName:'第二专业',
                description:'java',
                type:'后端之家',
            }, 
            {
                date: '3',
                CourseName:'第三专业',
                description:'历史',
                type:'0000',
            }, ]
    }
},
created(){
    if(JSON.parse(localStorage.getItem('tableData')) == null){
        console.log('111')
    }else{
        this.tableData=JSON.parse(localStorage.getItem('tableData'))
    }
},
    methods: {
      add(){
        this.tableData.push(JSON.parse(JSON.stringify(this.newData)))
      },

      handleEdit(index) {
        this.showSu = !this.showSu
        console.log(index)
        
      },
      handleDelete(index) {
        this.tableData.splice(index,1);
        localStorage.setItem('tableData',JSON.stringify(this.tableData))
      },
       submitForm() {
        this.show = !this.show
        this.tableData.push(Object.assign({},this.newData))
        localStorage.setItem('tableData',JSON.stringify(this.tableData))
        this.newData=[];
      },
       submit(newData,index) {
           console.log(this.tableData)
           console.log(newData)
           console.log(index)
      },
      resetForm() {
       this.show = !this.show
      }
    }
})
</script>
<style lang="scss" scoped>

</style>
